<template>
  <div class="item_container">
    <p class="class_name">{{ mclass.name }}</p>
    <div class="right">
      <p v-show="data.manage" class="manage_flag">由你管理</p>
      <p class="class_create_time">创建于{{ data.showDate }}</p>
      <el-button class="btn" @click="btnFunction">
        <slot></slot>
      </el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, PropType, reactive} from 'vue'
import {ClassRequest} from '../request/MyRequset'
import {Class} from '../types/mytypes';
import {mysqlTimeToMyDate} from "../tools/mysqlTool";
import {UserStore} from "../store/store";
const props = defineProps({
  mclass: Object as PropType<Class>,
  btnFunction: Function
})
const data = reactive({
  showDate: "",
  manage:false
})
onMounted(async ()=>{
  let user = UserStore.getUser();
  data.showDate = mysqlTimeToMyDate(props.mclass?.create_time as string);
  data.manage = (await ClassRequest.isUserManage(user.id,props.mclass?.id as number)).data;
})
</script>

<style scoped lang="scss">
.item_container {
  display: flex;
  flex-direction: row;
  height: 3em;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  width: 100%;
  padding-left: 1em;
  overflow: hidden;

  .class_name {
    font-weight: bold;
    font-size: 1.1em;
  }

  .right {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: right;
    width: 61%;

    .class_create_time {
      color: #999;
      margin-right: 10px;
    }

    .manage_flag{
      color: #999;
      margin-right: 10px;
      font-weight: bold;
    }

    .class_name {
      color: #999;
      margin-right: 10px;
      font-weight: bold;
    }

    .btn {
      width: 39%;
    }
  }
}
</style>